<template>
	<div class="login_box">
		<div class="box" id="cv-bg">

			<div class="card_body">
				<div class="text-center">
					<div class="title">
						<logo
							width="100"
							height="100"
							stroke-width="10"
							@logoComplete="showTitle = true"
						/>
						<h3 :class="[showTitle ? 'show' : '']">题库管理系统</h3>
					</div>
					<div class="input">
						<input class="input_style" placeholder="请输入用户名" v-model="username" autocomplete="off">
						<i class="fa fa-user-circle-o"></i>
					</div>
					<div class="input">
						<input class="input_style" placeholder="请输入密码" type="password" v-model="password" autocomplete="off">
						<i class="fa fa-unlock-alt"></i>
					</div>
					<div class="input trans-flex">
						<input class="input_style" placeholder="请输入图片中验证码" v-model="captcha" autocomplete="off">
						<img class="captcha-code" :src="`/p/captcha?_t=${now}`" @click="now = Date.now()">
						<i class="fa fa-picture-o"></i>
					</div>
					<button class="btn" @click="login">登录</button>
					<!--											<div class="order">-->
					<!--												<div class="order_left">-->
					<!--													<p>没有帐号？<label>立即注册</label></p>-->
					<!--												</div>-->
					<!--												<div class="order_right">-->
					<!--													<p><label class="link">忘记密码？</label></p>-->
					<!--												</div>-->
					<!--											</div>-->
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { inject, ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import logo from '../../components/logo'
// import * as THREE from 'three'
export default {
	components: { logo },
	setup () {
		const username = ref('')
		const password = ref('')
		const captcha = ref('')
		const now = ref(Date.now())
		const router = useRouter()
		const http = inject('http')
		const showTitle = ref(false)

		const login = () => {
			http.post('/p/a/login', {
				username: username.value,
				password: password.value,
				captcha: captcha.value
			}).then(res => {
				switch (res.status) {
					case 'ok':
						ElMessage.success(res.message)
						router.replace('/')
						break
					case 'err_captcha':
						captcha.value = ''
						now.value = Date.now()
						break
					default:
						now.value = Date.now()
				}
			})
		}

		const createAnimate = () => {
			const SEPARATION = 100
			const AMOUNTX = 50
			const AMOUNTY = 50
			var container
			var camera, scene, renderer
			var particles; var particle; var count = 0
			var mouseX = 500; var mouseY = -500
			var windowHalfX = window.innerWidth / 2
			var windowHalfY = window.innerHeight / 2
			init()
			animate()
			function init () {
				container = document.createElement('div')
				container.className = 'inject-bg'
				document.querySelector('#cv-bg').appendChild(container)
				// eslint-disable-next-line no-undef
				camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000)
				camera.position.z = 1000
				// eslint-disable-next-line no-undef
				scene = new THREE.Scene()
				// eslint-disable-next-line no-array-constructor
				particles = new Array()
				var PI2 = Math.PI * 2
				// eslint-disable-next-line no-undef
				var material = new THREE.ParticleCanvasMaterial({
					color: 0xc4c3ca,
					program: function (context) {
						context.beginPath()
						context.arc(0, 0, 1, 0, PI2, true)
						context.fill()
					}
				})
				var i = 0
				for (var ix = 0; ix < AMOUNTX; ix++) {
					for (var iy = 0; iy < AMOUNTY; iy++) {
						// eslint-disable-next-line no-undef
						particle = particles[i++] = new THREE.Particle(material)
						particle.position.x = ix * SEPARATION - ((AMOUNTX * SEPARATION) / 2)
						particle.position.z = iy * SEPARATION - ((AMOUNTY * SEPARATION) / 2)
						scene.add(particle)
					}
				}
				// eslint-disable-next-line no-undef
				renderer = new THREE.CanvasRenderer()
				renderer.setSize(window.innerWidth, window.innerHeight)
				container.appendChild(renderer.domElement)
				// document.addEventListener('mousemove', onDocumentMouseMove, false)
				document.addEventListener('touchstart', onDocumentTouchStart, false)
				document.addEventListener('touchmove', onDocumentTouchMove, false)
				window.addEventListener('resize', onWindowResize, false)
			}

			function onWindowResize () {
				windowHalfX = window.innerWidth / 2
				windowHalfY = window.innerHeight / 2
				camera.aspect = window.innerWidth / window.innerHeight
				camera.updateProjectionMatrix()
				renderer.setSize(window.innerWidth, window.innerHeight)
			}

			// function onDocumentMouseMove (event) {
			// 	mouseX = event.clientX - windowHalfX
			// 	mouseY = event.clientY - windowHalfY
			// }

			function onDocumentTouchStart (event) {
				if (event.touches.length === 1) {
					event.preventDefault()
					mouseX = event.touches[0].pageX - windowHalfX
					mouseY = event.touches[0].pageY - windowHalfY
				}
			}

			function onDocumentTouchMove (event) {
				if (event.touches.length === 1) {
					event.preventDefault()
					mouseX = event.touches[0].pageX - windowHalfX
					mouseY = event.touches[0].pageY - windowHalfY
				}
			}

			function animate () {
				requestAnimationFrame(animate)
				render()
			}

			function render () {
				camera.position.x += (mouseX - camera.position.x) * 0.05
				camera.position.y += (-mouseY - camera.position.y) * 0.05
				camera.lookAt(scene.position)
				var i = 0
				for (var ix = 0; ix < AMOUNTX; ix++) {
					for (var iy = 0; iy < AMOUNTY; iy++) {
						particle = particles[i++]
						particle.position.y = (Math.sin((ix + count) * 0.3) * 50) + (Math.sin((iy + count) * 0.5) * 50)
						particle.scale.x = particle.scale.y = (Math.sin((ix + count) * 0.3) + 1) * 2 + (Math.sin((iy + count) * 0.5) + 1) * 2
					}
				}
				renderer.render(scene, camera)
				count += 0.1
			}
		}

		onMounted(() => {
			createAnimate()
		})

		return {
			login,
			now,
			showTitle,
			username,
			password,
			captcha
		}
	}
}
</script>

<style>
.inject-bg {
	position: absolute;
	bottom: 0;
	left: 0;
}
</style>
<style scoped lang="scss">
	label {
		margin-bottom: 0;
		cursor: pointer;
		&:hover { color: #ffeba7; }
	}
	[type="checkbox"]:checked,
	[type="checkbox"]:not(:checked) {
		position: absolute;
		left: -9999px;
	}
	.checkbox:checked + label,
	.checkbox:not(:checked) + label {
		position: relative;
		display: block;
		text-align: center;
		width: 60px;
		height: 16px;
		border-radius: 8px;
		padding: 0;
		margin: 10px auto;
		cursor: pointer;
		background-color: #ffeba7;
	}
	.checkbox:checked + label:before,
	.checkbox:not(:checked) + label:before {
		position: absolute;
		display: block;
		width: 36px;
		height: 36px;
		border-radius: 50%;
		color: #ffeba7;
		background-color: #102770;
		font-family: "unicons";
		content: "\eb4f";
		z-index: 20;
		top: -10px;
		left: -10px;
		line-height: 36px;
		text-align: center;
		font-size: 24px;
		transition: all 0.5s ease;
	}
	.checkbox:checked + label:before {
		transform: translateX(44px) rotate(-270deg);
	}
	@keyframes animateGlow {
		0% {
			background-position: 0% 50%;
		}
		50% {
			background-position: 100% 50%;
		}
		100% {
			background-position: 0% 50%;
		}
	}
	.login_box {
		font-family: "Poppins", sans-serif;
		font-weight: 300;
		font-size: 15px;
		line-height: 1.7;
		height:100%;
		color: #c4c3ca;
		background-color: #1f2029;
		overflow-x: hidden;
		.box {
			position: relative;
			width: 100%;
			height:100%;
			display: flex;
			align-items: center;
			justify-content: center;
			.card_body{
				width: 100%;
				padding: 35px;
				z-index: 20;
				display: block;
				max-width: 440px;
				background-color: #151823;
				background-image: url("../../assets/pat.svg");
				background-position: bottom center;
				background-repeat: no-repeat;
				background-size: 300%;
				border: 1px solid #ffffff21;
				border-radius: 6px;
				.title {
					font-size: 26px;
					//animation: text_color 10s ease infinite;
					font-weight: 600;
					margin-bottom: 40px;
					display: flex;
					align-items: center;
					justify-content: center;
					h3 {
						opacity: 1;
						transition: 1s;
						width: 0px;
						overflow: hidden;
						white-space: nowrap;
						&.show {
							width: 200px;
						}
					}
				}
				.input {
					position: relative;
					display: block;
					margin: 0;
					padding: 0;
					margin-bottom: 10px;
					>.input_style {
						padding: 13px 20px 13px 55px;
						height: 48px;
						width: 100%;
						font-weight: 500;
						border-radius: 4px;
						font-size: 14px;
						line-height: 22px;
						letter-spacing: 0.5px;
						outline: none;
						color: #c4c3ca;
						background-color: #1f2029;
						border: none;
						transition: all 200ms linear;
						box-shadow: 0 4px 8px 0 rgba(21, 21, 21, 0.2);
						&:focus,&:active {
							border: none;
							outline: none;
							box-shadow: 0 4px 8px 0 rgba(21, 21, 21, 0.2);
						}
						&::-webkit-input-placeholder {
							color: #c4c3ca;
							opacity: 0.7;
							-webkit-transition: all 200ms linear;
							transition: all 200ms linear;
						}
						&:focus::-webkit-input-placeholder {
							opacity: 0;
							-webkit-transition: all 200ms linear;
							transition: all 200ms linear;
						}
					}
					>.fa{
						position: absolute;
						top: 0;
						left: 18px;
						height: 48px;
						font-size: 24px;
						line-height: 48px;
						text-align: left;
						color: #ffeba7;
						transition: all 200ms linear;
					}
					&.trans-flex {
						display: flex;
						align-items: center;
						.captcha-code {
							max-height: 100%;
							background: #fff;
						}
					}
				}
				.btn {
					display: block;
					width: 100%;
					border-radius: 4px;
					height: 44px;
					font-size: 15px;
					font-weight: 600;
					margin-top: 30px;
					text-transform: uppercase;
					transition: all 200ms linear;
					padding: 0 30px;
					letter-spacing: 1px;
					//display: inline-flex;
					align-items: center;
					justify-content: center;
					text-align: center;
					border: none;
					background-color: #ffeba7;
					color: #102770;
					box-shadow: 0 8px 24px 0 rgba(255, 235, 167, 0.2);
					&:hover {
						background-color: #f3d97f;
						color: #061f6e;
						box-shadow: 0 8px 24px 0 rgba(16, 39, 112, 0.2);
					}
				}
				.order{
					margin-top: 30px;
					display: flex;
					justify-content: space-between;
					font-weight: 500;
					font-size: 14px;
					line-height: 1.7;
					.order_left {
						animation: text_color 10s ease infinite;
					}
					.order_right{
						a {
							color: #c4c3ca;
							text-decoration: none;
							background-color: transparent;
							&:hover {
								cursor: pointer;
								transition: all 200ms linear;
							}
						}
					}
				}
			}
		}
	}

</style>
